import { captureStackTrace } from "postcss/lib/css-syntax-error";

const i_btn = document.querySelector(".play .import input#import_mp3_file");
console.log(i_btn);
const audio_play = document.querySelector("audio");
console.log(audio_play);
let curr_time = -1;
let curr_time_end = -1;
audio_play.addEventListener("timeupdate", function () {
  curr_time = audio_play.currentTime;
  console.log(curr_time);
  if (curr_time_end !== -1 && curr_time >= curr_time_end) {
    audio_play.pause();
  }
});

function importMp3File(btn, audio) {
  btn.addEventListener(
    "change",
    function () {
      const files = this.files;

      const reader = new FileReader();
      reader.addEventListener("load", (e) => {
        audio.src = e.target.result;
      });
      reader.addEventListener("error", (e) => {
        console.log(e.target.error);
      });
      reader.readAsDataURL(files.item(0));
    },
    false
  );
}

importMp3File(i_btn, audio_play);

const cut_start_time = document.querySelector(".play .cut>.cut_start_time");
const cut_end_time = document.querySelector(".play .cut>.cut_end_time");

let curr_start_time = -1;
let curr_end_time = -1;
function cutTime(status) {
  let cut_time_label = null;
  if (status) {
    cut_time_label = cut_start_time;
  } else {
    cut_time_label = cut_end_time;
  }
  const input = cut_time_label.querySelector("span");
  const btn = cut_time_label.querySelector("button");
  btn.addEventListener(
    "click",
    function () {
      let curr_time = audio_play.currentTime.toFixed(3);
      input.innerHTML = `${curr_time}`;
      if (status) {
        curr_start_time = curr_time;
      } else {
        curr_end_time = curr_time;
      }
    },
    false
  );
}

const data = [];

const slice = document.querySelector(".slice table");
console.log(slice);
function appendData(startTime, endTime) {
  // 生成随机字符串
  let time = Date.now();
  let r = Math.floor(Math.random() * 1000);
  let uid = time + String(r).padStart(3, "0");
  console.log(uid);
  const item = {
    uid: uid,
    start_time: startTime,
    end_time: endTime,
  };
  data.push(item);
  render(data);
}

const tbdy = document.querySelector(".slice table>tbody");
function render(data = []) {
  tbdy.innerHTML = "";
  data.forEach((e, i) => {
    const row = document.createElement("tr");
    let duration = e.end_time - e.start_time;
    duration = duration.toFixed(3);
    row.innerHTML = `
      <tr id="${e.uid}">
        <td>${i + 1}</td>
        <td>${e.start_time}</td>
        <td>${e.end_time}</td>
        <td>${duration}</td>
        <td><button class="start">start</button></td>
        <td><button class="stop">stop</button></td>
        <td><button class="del">del</button></td>
      </tr>
    `;
    tbdy.appendChild(row);
  });
  const start_btns = document.querySelectorAll("button.start");
  start_btns.forEach((item, i) => {
    item.addEventListener("click", function () {
      audio_play.currentTime = data[i].start_time;
      curr_time_end = data[i].end_time;
      audio_play.play();
    });
  });
  const stop_btns = document.querySelectorAll("button.stop");
  stop_btns.forEach((item) => {
    item.addEventListener("click", () => {
      audio_play.pause();
    });
  });
  const del_btns = document.querySelectorAll("button.del");
  del_btns.forEach((item, i) => {
    item.addEventListener("click", function () {
      data.splice(i, 1);
      render(data);
    });
  });
}

const addItem = document.querySelector(".play .cut>.control>.add_item");
addItem.addEventListener("click", function () {
  appendData(curr_start_time, curr_end_time);
  render(data);
});

export default { importMp3File, cutTime, curr_start_time, curr_end_time };
